<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
import type { CardCategoryType } from '../../types/card';

const props = defineProps<{
  selectedType: CardCategoryType | null;
  categories: { id: string; name: string }[];
}>();

const emit = defineEmits<{
  (e: 'select', type: CardCategoryType): void;
}>();

const selectType = (type: CardCategoryType) => {
  emit('select', type);
};
</script>

<template>
  <div class="card-type-selector flex justify-between py-4">
    <button 
      v-for="category in categories" 
      :key="category.id"
      class="card-type-btn px-6 py-2 rounded-full text-center"
      :class="selectedType === category.id ? 'bg-gray-700' : 'bg-gray-800'"
      @click="selectType(category.id as CardCategoryType)"
    >
      {{ category.name }}
    </button>
  </div>
</template>

<style scoped>
.card-type-btn {
  transition: all 0.3s ease;
  min-width: 80px;
}

.card-type-btn:hover {
  background-color: #444;
}
</style>